<template>

  <div>
    <el-breadcrumb separator="/" style="padding-bottom:20px;">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>部门管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-container direction="">

      <el-tree v-loading="treeLoading"
               ref="tree"
               style="width:350px;height:700px;overflow:auto;"
               :data="areas"
               :props="{label:'name'}"
               node-key="areaId"
               @current-change="currentChange"
               :default-expanded-keys="[query.area||'0']"
               :default-checked-keys="[query.area||'0']"
               :expand-on-click-node="false"
               accordion>
      </el-tree>

      <fm-grid url="/api/v1/sdep" ref="grid" :params="['kw','area','name']" style="width:100%;">

        <template slot-scope="{rows,loading,search}">

          <div class="filter-container">
            <el-input style="width: 200px;" v-model="query.kw" class="filter-item"
                      placeholder="请输入姓名或用户名"/>
            <el-button class="filter-item" style="margin-left: 10px;" @click="search(query,1)"
                       type="primary" icon="search">搜索
            </el-button>
            <div style="float:right;margin-right:20px;">
              <el-button class="filter-item" style="margin-left: 10px;"
              @click="$refs.depae.add($route.query.area,$route.query.name)"
              v-if="$auth.contains('dep-add')"
              type="text" icon="document">添加部门
              </el-button>
              <el-button class="filter-item" style="margin-left: 10px;"
              @click="$refs.areaae.add($route.query.area,$route.query.name)" type="text"
              v-if="$auth.contains('dep-ara-add')"
                        icon="document">添加区域
              </el-button>
              <el-button class="filter-item" style="margin-left: 10px;" @click="areaEdit" type="text"
              v-if="$auth.contains('dep-ara-edt')"
                        icon="document">编辑区域
              </el-button>
              <el-button class="filter-item" style="margin-left: 10px;" @click="addHdlr" type="text"
                        icon="document">批量授权
              </el-button>
            </div>
          </div>


          <el-table
            :data="rows"
            stripe
            v-loading="loading"
            style="width: 100%;padding-bottom:20px;border-bottom:none;">
            <el-table-column
              prop="name"
              label="名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="type"
              label="类型">
              <template slot-scope="{row}">
                <dict code="DepType" :dkey="row.type">
                  <template slot-scope="{data}">
                    <el-tooltip :open-delay="500" :content="data.value" placement="top">
                      <div>{{data.shortValue}}</div>
                    </el-tooltip>
                  </template>
                </dict>
              </template>
            </el-table-column>
            <el-table-column
              prop="areaName"
              label="所在区域"
              width="100">
            </el-table-column>
            <el-table-column
              prop="shortName"
              label="简称"
              width="100">
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="{row}">
                <el-button v-if="$auth.contains('dep-edt')" @click="edit(row)" type="text">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>

      </fm-grid>
    </el-container>
    <dep-ae @success="$refs.grid && $refs.grid.search()" ref="depae"/>
    <area-ae @success="reload" ref="areaae"/>
  </div>

</template>

<script>

  import axios from '@/util/axios';
  import toRecu  from '@/util/recu';
  import DepAe from './DepAe';
  import AreaAe from './AreaAe';
  import Dict from '@/components/Dict';

  export default {

    components: {DepAe,AreaAe,Dict },

    mounted(){
      this.$nextTick(this.load);
    },

    data(){
      return {
        treeLoading:false,
        query:{},
        areas:undefined
      }
    },

    methods:{

      load(){
        const { kw,area,name } = this.$route.query
        const qry = this.query = {...this.query,name, kw,area}
        this.treeLoading = true;
        axios.get('/api/v1/sdep/areas').then(({data}) => {
          this.areas = toRecu(data,this.$session.parentAreaId,'areaId','parentId');
          this.treeLoading = false;
          if(!this.areas) return;
          if(!qry.area||!qry.name){
            this.$refs.grid && this.$refs.grid.search({area:this.areas[0].areaId,name:this.areas[0].name});
          }
        });
      },

      currentChange(row){
        this.$refs.grid.search({area:row.areaId,name:row.name});
      },

      edit(row){
        const {area,name} = this.$route.query;
        this.$refs.depae.edit(area,name,row.id);
      },

      reload(name){
        if(name){
          this.$router.push({query: { ...this.$route.query,name }});
        }
        this.load();
        this.$refs.grid.search();
      },

      addHdlr(){

      },

      areaEdit(){
        const {area,name} = this.$route.query;
        this.$refs.areaae.edit(area,name);
      }


    }

  }

</script>

